<template>
    <div id="login" @keyup.enter="login">
        <div class="dowebok">
            <div class="logo"></div>
            <el-form label-width="0" :model="login_user" :rules="loginRules" ref="loginForm">
                <el-form-item prop="userName">
                    <el-input v-model="login_user.userName"  id="username" type="text" autocomplete="off" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input  v-model="login_user.password" id="password" type="password" autocomplete="off" placeholder="登录密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button id="submit" @click="login">登 录</el-button>
                </el-form-item>
            </el-form>
            <div class="reg-bar">
                <el-checkbox v-model="autoLogin" class="reg">自动登录</el-checkbox>
                <a class="forget">忘记密码</a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            login_user:{},
            autoLogin:true,
            loginRules:{
                userName:[
                    {required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password:[
                    {required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        login: function(){
            this.$refs["loginForm"].validate((valid) => {
                if (valid){
                    this.$axios
                    .post('api/login',this.qs.stringify(this.login_user))
                    .then(res => {
                        if(res.data){   // 判断是否登录成功
                            this.$store.dispatch('setUserStatus',res.data)
                            if (this.autoLogin){    // 判断是否自动登录
                                localStorage.setItem('isLogin', true);
                                localStorage.setItem('user', JSON.stringify(res.data));
                            }
                            this.$router.push({path:'/'})
                        }else{
                            this.global.mes_error("用户名或密码错误！")
                            this.login_user = {}
                        }
                    })
                    .catch(err => {
                        window.console.error(err); 
                    })
                }else{
                    return false
                }
            })
        }
    },
    created(){
        this.$store.dispatch('setUserStatus');

    }

};
</script>

<style>
#login {height: 100%;background: #fff url(../../assets/backgroud.png) 50% 50% no-repeat;background-size: cover;}
#login .dowebok {position: absolute; left: 50%; top: 50%; width: 430px; height: 550px; margin: -300px 0 0 -215px; border: 1px solid #fff; border-radius: 20px; overflow: hidden;}
#login .logo { width: 104px; height: 104px;  margin: 50px auto 80px; background: url(../../assets/login.png) 0 0 no-repeat;}
#login .el-form-item {width: 288px; position: relative; width: 360px; margin: 0 auto; padding-bottom: 30px;}
#login .el-form-item input {height: 48px; padding-left: 70px; border: 1px solid #fff; border-radius: 25px; font-size: 18px; color: #fff; background-color: transparent; outline: none;}
#login .el-form-item button {width: 360px; height: 50px; border: 0; border-radius: 25px; font-size: 18px; color: #1f6f4a; outline: none; cursor: pointer; background-color: #fff;}
#login #username { background: url(../../assets/emil.png) 20px 14px no-repeat;}
#login #password { background: url(../../assets/password.png) 23px 11px no-repeat;}
#login .tip { display: none; position: absolute; left: 20px; top: 52px; font-size: 14px; color: #f50;}
#login .reg-bar { width: 360px;  margin: 20px auto 0; font-size: 14px; overflow: hidden;}
#login .reg-bar a { color: #fff; text-decoration: none;}
#login .reg-bar a:hover {text-decoration: underline;}
#login .reg-bar .reg { float: left; color:white!important}
#login .reg-bar .forget { float: right;}
#login .dowebok ::-webkit-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
#login .dowebok :-moz-placeholder {font-size: 18px; line-height: 1.4; color: #fff;}
#login .dowebok ::-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
#login .dowebok :-ms-input-placeholder {font-size: 18px;line-height: 1.4; color: #fff;}
.el-checkbox__input.is-checked + .el-checkbox__label {color: white!important;}
.el-form-item__error{padding-left: 20px!important}
</style>
